<template>
  <div>
    <div class="search-bar">
      <el-form
        class="search-form"
        inline
        @submit.prevent
      >
        <div class="input-row margin-bottom-none">
          <el-form-item
            label="名称"
            class="search-form-item"
          >
            <el-input
              v-model="searchForm.paramKey"
              type="text"
              clearable
              placeholder="名称"
            />
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="search"
            >
              {{ $t('crud.searchBtn') }}
            </div>
            <div
              class="default-btn"
              @click="reset"
            >
              {{ $t('product.reset') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main-container">
      <!-- 操作栏 -->
      <div class="operation-bar">
        <div
          class="default-btn primary-btn"
          @click.stop="showAdd"
        >
          {{ $t("sysManagement.add") }}
        </div>
      </div>
    </div>

    <div u-mt-4>
      <el-table
        v-loading="loading"
        :data="dataList"
      >
        <el-table-column
          label="名称"
          prop="botName"
        />
        <el-table-column
          label="webhook key"
          prop="botKey"
        />
        <el-table-column
          label="备注"
          prop="notes"
        />
        <el-table-column
          label="操作"
          width="180"
        >
          <template #default="{row}">
            <el-button
              type="primary"
              text
              @click="showEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              text
              @click="remove(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="dataList.length"
        u-mt-4
        :current-page="current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeSize"
        @current-change="changePage"
      />
    </div>

    <Add ref="addRef" />
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import Add from './Add.vue'

const searchForm = ref({
  paramKey: ''
})

const search = () => {
  current.value = 1
  fetchConfig()
}

const reset = () => {
  searchForm.value.paramKey = ''
  current.value = 1
  fetchConfig()
}

const dataList = ref([])

const loading = ref(false)

const fetchConfig = async () => {
  loading.value = true
  try {
    const res = await http({
      url: http.adornUrl('/platform/wxwork-bot/page'),
      params: http.adornParams({
        current: current.value,
        size: size.value,
        botName: searchForm.value.paramKey
      })
    })
    dataList.value = res.data.records
    total.value = res.data.total
  } catch (error) {
    console.log('%c Line:146 🥛 error', 'color:#5B6910', error)
  }
  loading.value = false
}

const { current, size, total, changePage, changeSize } = usePagination(fetchConfig)

fetchConfig()

const addRef = ref()
const showAdd = () => {
  addRef.value.add(async (record) => {
    await http({
      url: http.adornUrl('/platform/wxwork-bot'),
      method: 'post',
      data: http.adornData(record)
    })
    ElMessage.success('保存成功')
    fetchConfig()
  })
}
const showEdit = (row) => {
  addRef.value.edit(row, async (record) => {
    const { id, botName, botKey, notes } = record
    await http({
      url: http.adornUrl('/platform/wxwork-bot'),
      method: 'put',
      data: {
        id,
        botName,
        botKey,
        notes
      }
    })
    ElMessage.success('更新成功')
    fetchConfig()
  })
}

const remove = async (row) => {
  await ElMessageBox.confirm(`是否删除参数${row.botName}`, '提示')
  await http({
    url: http.adornUrl(`/platform/wxwork-bot/${row.id}`),
    method: 'delete'
  })
  ElMessage.success('删除成功')
  fetchConfig()
}
</script>
